<template>
	<scroll-view scroll-x="true" show-scrollbar="false" class="scroll-container">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			class="tarBox"></uni-segmented-control>
	</scroll-view>
	<view class="main" :style="{'height': (windowHeight - 56 - props.bottomPadding) + 'px', 'padding-bottom': props.bottomPadding + 'px' }">
		<scroll-view class="content" scroll-y="true" :scrollTop="scrollTop" scroll-with-animation @scroll="handleScroll">
			<uni-card :is-shadow="false" margin="2px 10px 10px 10px">
				<p><b style="font-size: 15px;">张三、李四--风险（家庭纠纷)</b></p>
				<text class="uni-body">编号</text>
			</uni-card>
			<uni-section title="基本信息" ref="scrollBox1" type="line">
				<uni-card :is-shadow="false" margin="2px 10px 10px 10px">
					<uni-row class="demo-uni-row">
						<uni-col :span="6">因素</uni-col>
						<uni-col :span="18">家庭纠纷</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="6">风险等级</uni-col>
						<uni-col :span="18">家庭纠纷</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="6">风险模式</uni-col>
						<uni-col :span="18">家庭纠纷</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="6">登记时间</uni-col>
						<uni-col :span="18">家庭纠纷</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="6">更新时间</uni-col>
						<uni-col :span="18">家庭纠纷</uni-col>
					</uni-row>
				</uni-card>
			</uni-section>
			<uni-section title="责任部门" ref="scrollBox2" type="line">
				<uni-card :is-shadow="false" margin="2px 10px 10px 10px">
					<uni-row class="demo-uni-row">
						<uni-col :span="8">洪山街道</uni-col>
						<uni-col :span="4">张三</uni-col>
						<uni-col :span="8">13888888888</uni-col>
						<uni-col :span="4">待接收</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="8">洪山街道</uni-col>
						<uni-col :span="4">张三</uni-col>
						<uni-col :span="8">13888888888</uni-col>
						<uni-col :span="4">待接收</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="8">洪山街道</uni-col>
						<uni-col :span="4">张三</uni-col>
						<uni-col :span="8">13888888888</uni-col>
						<uni-col :span="4">待接收</uni-col>
					</uni-row>
				</uni-card>
			</uni-section>
			<uni-section title="当事人" ref="scrollBox3" type="line">
				<uni-card :is-shadow="false" margin="2px 10px 10px 10px">
					<uni-row>
						<uni-col :span="5">
							<image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
								class="imgLeft"></image>
						</uni-col>
						<uni-col :span="19">
							<uni-row class="demo-uni-row">
								<uni-col :span="7">张三</uni-col>
								<uni-col :span="17">男 35岁</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row">
								<uni-col :span="7">手机号码</uni-col>
								<uni-col :span="17">13888888888</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row">
								<uni-col :span="7">身份证号</uni-col>
								<uni-col :span="17">{{maskIDCard('123456789012345678901')}}</uni-col>
							</uni-row>
						</uni-col>
					</uni-row>
					<view class="lineDivider"></view>
					<uni-row class="demo-uni-row">
						<uni-col :span="5">
							<image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
								class="imgLeft"></image>
						</uni-col>
						<uni-col :span="19">
							<uni-row class="demo-uni-row">
								<uni-col :span="7">张三</uni-col>
								<uni-col :span="17">男 35岁</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row">
								<uni-col :span="7">手机号码</uni-col>
								<uni-col :span="17">13888888888</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row">
								<uni-col :span="7">身份证号</uni-col>
								<uni-col :span="17">{{maskIDCard('123456789012345678901')}}</uni-col>
							</uni-row>
						</uni-col>
					</uni-row>
				</uni-card>
			</uni-section>
			<uni-section title="矛盾纠纷情况" ref="scrollBox4" type="line">
				<uni-card title="事件起因和情况" :is-shadow="false" margin="2px 10px 10px 10px">
					<text class="uni-body">这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
				</uni-card>
				<uni-card title="事件结果" :is-shadow="false" margin="2px 10px 10px 10px">
					<text class="uni-body">这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
				</uni-card>
				<uni-card title="事件处理经过" :is-shadow="false" margin="2px 10px 10px 10px">
					<text class="uni-body">这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
				</uni-card>
				<uni-card title="处置结果" :is-shadow="false" margin="2px 10px 10px 10px">
					<text class="uni-body">这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
				</uni-card>
				<uni-card title="风险隐患" :is-shadow="false" margin="2px 10px 10px 10px">
					<text class="uni-body">这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
				</uni-card>
				<uni-card title="后续工作建议" :is-shadow="false" margin="2px 10px 10px 10px">
					<text class="uni-body">这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
				</uni-card>
			</uni-section>
			<uni-section title="工作记录" ref="scrollBox5" type="line">
				<uni-segmented-control :current="workRecord" :values="workItems" @clickItem="onClickWorkItem"
					styleType="button" style="padding: 0 10px;"></uni-segmented-control>
				<view class="lastBox">
					<view v-show="workRecord === 0">
						<up-steps current="2" direction="column" dot>
							<up-steps-item v-for="(item,index) in optionsSteps" :key="index">
								<template #desc>
									<uni-row class="jiluBox">
										<uni-col :span="24" style="color: #333;"><b>{{item.title}}</b></uni-col>
										
										<uni-col :span="6" class="biaoti">处理人：</uni-col>
										<uni-col :span="18" class="neirong">张三</uni-col>
										
										<uni-col :span="6" class="biaoti">处理部门：</uni-col>
										<uni-col :span="18" class="neirong">陈楠社区</uni-col>
										
										<uni-col :span="6" class="biaoti">类型：</uni-col>
										<uni-col :span="18" class="neirong">调处</uni-col>
										
										<uni-col :span="6" class="biaoti">工作内容：</uni-col>
										<uni-col :span="18" class="neirong">工作内容工作内容工作内容工作内容工作内容</uni-col>
										
										<uni-col :span="6" class="biaoti">工作结果：</uni-col>
										<uni-col :span="18" class="neirong">工作结果工作结果工作结果工作结果工作结果工作结果</uni-col>
										
										<uni-col :span="24" class="biaoti">附件：</uni-col>
										<uni-col :span="18" class="neirong">工作结果工作结果工作结果工作结果工作结果工作结果</uni-col>
									</uni-row>
								</template>
							</up-steps-item>
						</up-steps>
					</view>
					<view v-show="workRecord === 1">
						选项卡2的内容
					</view>
					<view v-show="workRecord === 2">
						选项卡3的内容
					</view>
				</view>
			</uni-section>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps
	} from 'vue';
	
	const props = defineProps({
		// 底部距离
	    bottomPadding: {
	        type: Number,
	        default: 60, // 60为底部默认一行按钮
	    },
		id: {
		    type: String,
		    default: '',
		},
	})
	
	const windowHeight = uni.getSystemInfoSync().windowHeight //获取内容区高度

	const items = ref(['基本信息', '责任部门', '当事人', '矛盾纠纷情况', '工作记录']);
	const current = ref(0);

	const scrollTop = ref(0)
	const scrollBox1 = ref(null);
	const scrollBox2 = ref(null);
	const scrollBox3 = ref(null);
	const scrollBox4 = ref(null);
	const scrollBox5 = ref(null);

	// 锚点滚动
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
			// 可锚点定位
			if (scrollBox1.value && e.currentIndex == 0) {
				// window.scrollTo({
				// 	top: scrollBox1.value.$el.offsetTop,
				// 	behavior: 'smooth'
				// });
				// uni.pageScrollTo({
				// 	scrollTop: scrollBox1.value.$el.offsetTop,
				// 	duration: 300
				// });
				scrollTop.value = scrollBox1.value.$el.offsetTop
			} else if (scrollBox2.value && e.currentIndex == 1) {
				scrollTop.value = scrollBox2.value.$el.offsetTop
			} else if (scrollBox3.value && e.currentIndex == 2) {
				scrollTop.value = scrollBox3.value.$el.offsetTop
			} else if (scrollBox4.value && e.currentIndex == 3) {
				scrollTop.value = scrollBox4.value.$el.offsetTop
			} else if (scrollBox5.value && e.currentIndex == 4) {
				scrollTop.value = scrollBox5.value.$el.offsetTop
			}

		}
	};

	// 监听滚动
	function handleScroll(e){
		const top = e.detail.scrollTop
		if(top < scrollBox2.value.$el.offsetTop){
			current.value = 0
		}else if(scrollBox2.value.$el.offsetTop <= top && top < scrollBox3.value.$el.offsetTop){
			current.value = 1
		}else if(scrollBox3.value.$el.offsetTop <= top && top < scrollBox4.value.$el.offsetTop){
			current.value = 2
		}else if(scrollBox4.value.$el.offsetTop <= top && top < scrollBox5.value.$el.offsetTop){
			current.value = 3
		}else if(scrollBox5.value.$el.offsetTop <= top){
			current.value = 4
		}
	}

	// 工作记录
	const workItems = ref(['调处', '工作', '评估', '交办', '销号']);
	const workRecord = ref(0);

	function onClickWorkItem(e) {
		if (workRecord.value != e.currentIndex) {
			workRecord.value = e.currentIndex;
		}
	}

	const optionsSteps = ref([{
			title: '步骤111',
			desc: '2024-06-17'
		},
		{
			title: '步骤22',
			desc: ' 2024-08-17'
		},
		{
			title: '步骤33333',
			desc: '2024-12-17'
		},
	])
	const currentStep = ref(0)
	
	
	function maskIDCard(idCard) {
	  // 确保身份证号码长度至少为18位
	  // if (idCard.length < 18) {
	  //   return idCard; // 或者可以抛出错误，取决于你的需求
	  // }
	  // 使用slice方法获取身份证号码的前14位，然后与"****"拼接
	  return idCard.slice(0, -4) + '****';
	}
</script>

<style lang="less" scoped>
	.main {
		// height: calc(100vh - 56px);
		background-color: #fff;
	}

	.scroll-container {
		height: 46px;
		white-space: nowrap;
		padding-top: 10px;
		background-color: #fff;
	}

	.tarBox {
		display: block;
		overflow: auto;
	}

	.tarBox ::v-deep .segmented-control__item {
		padding: 0 10px;
		display: inline-block;
		/* 根据需要调整宽度 */
		width: auto;
		/* 或者设置具体的宽度值 */
	}

	.content {
		height: 100%;
	}

	.imgLeft {
		width: 50px;
		height: 50px;
		border-radius: 40px;
		margin-top: 8px;
	}

	.lineDivider {
		width: 100%;
		height: 1px;
		background-color: #ededed;
		margin: 10px 0;
	}
	
	.lastBox{
		padding: 0 10px; 
		margin-top: 16px;
	}
	
	.jiluBox{
		border: 1px solid #EBEEF5;
		border-radius: 4px;
		padding: 10px;
		margin-bottom: 12px;
	}
	.jiluBox .uni-col{
		margin-bottom: 8px;
	}
	
	.biaoti{
		color: #858585;
	}
	.neirong{
		color: #4b4b4b;
	}
</style>